<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/goods_manager' }">商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>配货出库</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>
    <div class="anniu">
      <el-button type="primary" @click="showDialog"> 创建商品出库</el-button>

      <el-button type="success" v-model="isCX" @click="cx">查询</el-button>
      <el-button type="info" @click="exportExcelSelect">导出列表</el-button>
    </div>

    <shoopView class="shoop" v-show="dialog_visible" />
    <!-- <handleEdit class="bj" v-show="bj" /> -->
    <handleUpdate class="bj" v-show="sh" />

    <!-- 查询 -->
    <div class="cx" v-if="isCX == true">
      <el-form ref="form" :model="form" label-width="80px" :inline="true">
        <el-form-item label="单据编号:" prop="documentNum">
          <el-input v-model="form.documentNum"></el-input>
        </el-form-item>
        <span>至</span>
        <el-form-item prop="documentNum1">
          <el-input v-model="form.documentNum1"></el-input>
        </el-form-item>

        <el-form-item label="商品类型:" prop="category">
          <!-- <el-select v-model="form.category" placeholder="请选择商品类型">
            <el-option label="区域一" value="区域一"></el-option>
            <el-option label="区域二" value="区域二"></el-option>
          </el-select> -->
          <el-input v-model="form.category"></el-input>
        </el-form-item>

        <el-form-item label="供应商:" prop="vendor">
          <!-- <el-select v-model="form.vendor" placeholder="请选择供应商">
            <el-option label="区域一" value="区域一"></el-option>
            <el-option label="区域二" value="区域二"></el-option>
          </el-select> -->
          <el-input v-model="form.vendor"></el-input>
        </el-form-item>

        <el-form-item label="入库门店:" prop="inboundStore">
          <!-- <el-select v-model="form.inboundStore" placeholder="请选择入库门店">
            <el-option label="区域一" value="区域一"></el-option>
            <el-option label="区域二" value="区域二"></el-option>
          </el-select> -->
          <el-input v-model="form.inboundStore"></el-input>
        </el-form-item>

        <el-form-item label="柜台名称:" prop="counter">
          <!-- <el-select v-model="form.counter" placeholder="请选择柜台名称">
            <el-option label="区域一" value="区域一"></el-option>
            <el-option label="区域二" value="区域二"></el-option>
          </el-select> -->
          <el-input v-model="form.counter"></el-input>
        </el-form-item>

        <el-form-item label="创单日期:" prop="createDate">
          <el-input v-model="form.createDate"></el-input>
        </el-form-item>
        <span>至</span>
        <el-form-item prop="createDate1">
          <el-input v-model="form.createDate1"></el-input>
        </el-form-item>

        <el-form-item label="订单号:" prop="orderNumber">
          <el-input v-model="form.orderNumber"></el-input>
        </el-form-item>

        <el-form-item label="来源:" prop="source">
          <!-- <el-select v-model="form.source" placeholder="请选择供应商">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select> -->
          <el-input v-model="form.source"></el-input>
        </el-form-item>

        <el-form-item label="创单人:" prop="createPerson">
          <el-input v-model="form.createPerson"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">确认查询</el-button>
          <el-button @click="shouqi('form')">收起</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="tableData" :cell-style="rowStyle" :header-cell-style="headStyle" border style="width: 100%">
        <el-table-column width="100px" prop="hh" label="行号" type="index"> </el-table-column>
        <el-table-column width="100px" prop="state" label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.state == '0'">未审核</span>
            <span v-else-if="scope.row.state == '1'">已驳回</span>
            <span v-else-if="scope.row.state == '2'">已通过</span>
          </template>
        </el-table-column>
        <el-table-column width="100px" prop="documentid" label="单据编号"> </el-table-column>
        <el-table-column width="100px" prop="createtime" label="创单日期"> </el-table-column>
        <el-table-column width="100px" prop="typeName" label="商品类型"> </el-table-column>
        <el-table-column width="100px" prop="vendor" label="供应商"> </el-table-column>
        <el-table-column width="100px" prop="fendianname" label="入库门店"> </el-table-column>
        <el-table-column width="100px" prop="guitainame" label="柜台/类库名称"> </el-table-column>
        <el-table-column width="100px" prop="orderNumber" label="订单号"> </el-table-column>
        <el-table-column width="100px" prop="number" label="数量"> </el-table-column>
        <el-table-column width="100px" prop="cost" label="总重量"> </el-table-column>
        <el-table-column width="100px" prop="totalPrice" label="总成本"> </el-table-column>
        <el-table-column width="100px" prop="coefficient" label="系数"> </el-table-column>
        <el-table-column width="100px" prop="labelamount" label="标签总价"> </el-table-column>
        <el-table-column width="100px" prop="from" label="来源"> </el-table-column>
        <el-table-column width="100px" prop="createperson" label="创单人"> </el-table-column>
        <el-table-column width="100px" prop="approver" label="审批人"> </el-table-column>
        <el-table-column width="100px" prop="approverdate" label="审批日期"> </el-table-column>
        <el-table-column label="操作" width="300px" fixed="right">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              :disabled="scope.row.isDisable"
              @click="handleUpdate(scope.$index, scope.row)"
            >
              {{ scope.row.statuss }}
            </el-button>
            <el-button size="mini" type="warning" @click="cxhandleEdit(scope.$index, scope.row)"
              >商品详情(编辑)</el-button
            >
            <el-button size="mini" type="danger" @click="cxhandleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 页面的渲染 -->
    <el-table
      :data="tableData"
      @selection-change="handleSelectionChange"
      :cell-style="rowStyle"
      :header-cell-style="headStyle"
      border
      style="width: 100%"
      v-else
    >
      <el-table-column type="selection"> </el-table-column>
      <el-table-column width="100px" prop="hh" label="行号" type="index"> </el-table-column>
      <el-table-column width="100px" prop="state" label="状态">
        <template slot-scope="scope">
          <span v-if="scope.row.state == '0'">未审核</span>
          <span v-else-if="scope.row.state == '1'">已驳回</span>
          <span v-else-if="scope.row.state == '2'">已通过</span>
        </template>
      </el-table-column>
      <el-table-column width="100px" prop="documentid" label="单据编号"> </el-table-column>
      <el-table-column width="100px" prop="createtime" label="创单日期"> </el-table-column>
      <el-table-column width="100px" prop="suoshucorp" label="出库门店"> </el-table-column>
      <el-table-column width="100px" prop="guitainame" label="出库柜台"> </el-table-column>
      <el-table-column width="100px" prop="fendianname" label="入库门店"> </el-table-column>
      <el-table-column width="100px" prop="guitainame" label="入库柜台"> </el-table-column>
      <el-table-column width="100px" prop="typeName" label="商品类型"> </el-table-column>
      <el-table-column width="100px" prop="number" label="数量"> </el-table-column>
      <el-table-column width="100px" prop="weight" label="重量"> </el-table-column>
      <el-table-column width="100px" prop="cost" label="成本"> </el-table-column>
      <el-table-column width="100px" prop="coefficient" label="系数"> </el-table-column>
      <el-table-column width="100px" prop="labelamount" label="标签金额"> </el-table-column>
      <el-table-column width="100px" prop="from" label="来源"> </el-table-column>
      <el-table-column width="100px" prop="createperson" label="创单人"> </el-table-column>
      <el-table-column width="100px" prop="approver" label="审批人"> </el-table-column>
      <el-table-column width="100px" prop="approverdate" label="审批日期"> </el-table-column>

      <el-table-column label="操作" width="280px" fixed="right">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            :disabled="scope.row.isDisable"
            @click="handleUpdate(scope.$index, scope.row)"
          >
            <span v-if="scope.row.state == '0'">审核</span>
            <span v-else-if="scope.row.state == '1'" @click="cxbb(scope.row.id)">撤销驳回</span>
            <span v-else-if="scope.row.state == '2'" :disabled="(scope.row.isDisable = true)">已通过</span>
          </el-button>
          <!-- <el-button size="mini" type="warning" @click="handleEdit(scope.$index, scope.row)">查看(编辑)</el-button> -->
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-sizes="[2, 5, 10, 20]"
        :page-size="pageSize"
        layout="sizes, prev, pager, next"
        :total="totalCount"
      >
      </el-pagination>
    </div>

    <!--预览弹窗表格-->
    <el-dialog title="表格保存预览" width="70%" :visible.sync="selectWindow">
      <el-table :data="selectData" id="selectTable" height="380px">
        <el-table-column width="100px" prop="goodsId" label="行号"> </el-table-column>
        <el-table-column width="100px" prop="state" label="状态"> </el-table-column>
        <el-table-column width="100px" prop="documentid" label="单据编号"> </el-table-column>
        <el-table-column width="100px" prop="createtime" label="创单日期"> </el-table-column>
        <el-table-column width="100px" prop="suoshucorp" label="出库门店"> </el-table-column>
        <el-table-column width="100px" prop="guitainame" label="出库柜台"> </el-table-column>
        <el-table-column width="100px" prop="fendianname" label="入库门店"> </el-table-column>
        <el-table-column width="100px" prop="guitainame" label="入库柜台"> </el-table-column>
        <el-table-column width="100px" prop="typeName" label="商品类型"> </el-table-column>
        <el-table-column width="100px" prop="number" label="数量"> </el-table-column>
        <el-table-column width="100px" prop="weight" label="重量"> </el-table-column>
        <el-table-column width="100px" prop="cost" label="成本"> </el-table-column>
        <el-table-column width="100px" prop="coefficient" label="系数"> </el-table-column>
        <el-table-column width="100px" prop="labelamount" label="标签金额"> </el-table-column>
        <el-table-column width="100px" prop="from" label="来源"> </el-table-column>
        <el-table-column width="100px" prop="createperson" label="创单人"> </el-table-column>
        <el-table-column width="100px" prop="approver" label="审批人"> </el-table-column>
        <el-table-column width="100px" prop="approverdate" label="审批日期"> </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="exportExcel">确定保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
//  getDoosTotal,
import { getDoosList, delDoosApi, cxBoHuiDoosApi } from '@/http/doos'
import ShoopView from '@/components/doos/ShoopView.vue'
import htmlToExcel from '@/utils/htmlToExcel'
//import handleEdit from '@/components/doos/handleEdit.vue'
import handleUpdate from '@/components/doos/handleUpdate.vue'
export default {
  name: 'DoosView',
  components: {
    ShoopView,
    // handleEdit,
    handleUpdate
  },
  data() {
    return {
      form: {
        documentNum: '',
        documentNum1: '',
        category: '',
        vendor: '',
        inboundStore: '',
        counter: '',
        createDate: '',
        createDate1: '',
        orderNumber: '',
        source: '',
        createPerson: ''
      },
      //表格中选中的数据
      selectData: [],
      selectWindow: false,

      sh: false, //handleEdit 审核子组件是否显示
      bj: false, //handleEdit是否显示
      visible: false,
      isCX: false, //查询内容是否显示
      dialog_visible: false, //ShoopView内容是否显示
      tableData: [],
      totalCount: 0,
      currentPage: 1,
      pageSize: 5,
      loading: false
    }
  },
  created() {
    this.getInit(this.currentPage, this.pageSize)
  },
  watch: {
    currentPage(val) {
      this.getInit(val, this.pageSize)
    },
    pageSize(val) {
      this.getInit(this.currentPage, val)
    }
  },
  methods: {
    cxbb(id) {
      this.form.state = 0
      cxBoHuiDoosApi(this.form, id)
        .then(() => {
          this.getInit(this.currentPage, this.pageSize)
        })
        .catch((err) => {
          console.log(err)
        })
    },
    //导出
    exportExcel() {
      htmlToExcel.getExcel('#selectTable', '导出的自定义标题')
    },
    //显示预览弹窗
    exportExcelSelect() {
      if (this.selectData.length < 1) {
        this.$message.error('请选择要导出的内容！')
        return false
      }
      this.selectWindow = true
    },
    //选中数据
    handleSelectionChange(val) {
      this.selectData = val
    },
    rowStyle() {
      return 'text-align:center'
    },
    headStyle() {
      return 'text-align:center'
    },
    // 分页
    getInit(currentPage, pageSize) {
      this.loading = true
      getDoosList(currentPage, pageSize).then((res) => {
        console.log(res)
        this.totalCount = res.data.total
        this.tableData = res.data.data
      })
      .catch(err=>{
        console.log(err)
      })
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.getInit(this.currentPage, this.pageSize)
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      this.getInit(this.currentPage, this.pageSize)
    },

    showDialog() {
      this.dialog_visible = !this.visible
      this.$bus.$emit('dakai', this.dialog_visible)
    },
    onSubmit() {
      let cx = []
      cx = this.tableData.filter((item) => {
        return (
          (item.documentid >= this.form.documentNum && item.documentid <= this.form.documentNum1) ||
          item.typeName == this.form.category ||
          item.vendor == this.form.vendor ||
          item.fendianname == this.form.inboundStore ||
          item.guitainame == this.form.counter ||
          (item.createtime >= this.form.createDate && item.createDate <= this.form.createDate1) ||
          item.orderNumber == this.form.orderNumber ||
          item.from == this.form.source ||
          item.createperson == this.form.createPerson
        )
      })
      this.tableData = cx
    },
    //查询
    cx() {
      this.isCX = !this.isCX
    },
    shouqi(form) {
      this.isCX = false
      this.$refs[form].resetFields()
      this.getInit(this.currentPage, this.pageSize)
    },
    cxhandleEdit(index, row) {
      this.handleEdit(index, row)
    },
    cxhandleDelete(index, row) {
      console.log(index, row)
      this.handleDelete()
    },

    handleUpdate(index, row) {
      console.log(index, row)
      let shh = this.tableData.filter((item) => {
        return item.id == row.id
      })
      if (shh[0].state == 0) {
        this.sh = !this.visible
        this.$bus.$emit('sh', this.sh, shh)
      }
    },

    /*
    //编辑
    handleEdit(index, row) {
      console.log(index, row)
      let gl = this.tableData.filter((item) => {
        return item.goodsId == row.goodsId
      })
      this.bj = !this.visible
      this.$bus.$emit('bj', this.bj, gl)
    },
    */
    handleDelete(index, row) {
      console.log(index, row)
      this.$confirm('确认删除该条数据吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.delDooscatergory(row.id)
      })
    },
    delDooscatergory(id) {
      delDoosApi(id).then(() => {
        this.$message.success('删除成功！')
        this.getInit(this.currentPage, this.pageSize)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.block {
  margin-top: 20px;
}

.bt {
  text-align: center;
}
.anniu {
  margin-bottom: 20px;
}
.shoop {
  z-index: 2;
}
.bj {
  z-index: 3;
}
</style>